<template>
  <!-- 灵活用工table组件 -->
  <div>
    <transition name="el-zoom-in-top">
      <div
        class="download"
        v-show="checkboxSelect > 0"
        style="margin-top: 15px"
      >
        <i class="el-icon-info"></i>
        共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
        >项
        <span @click="excelDownload">下载</span>
        <em @click="cleanSelection">清空</em>
      </div>
    </transition>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selectionChange="downloadWhether"
      :row-key="getRowKeys"
      ref="multipleTable"
    >
      <el-table-column type="selection" :reserve-selection="true" width="45"> </el-table-column>
      <el-table-column prop="name" label="用工平台"> </el-table-column>
      <el-table-column prop="platformType" label="平台类型">
        <template #default="item">
          {{ platformType[item.row.platformType] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="businessNum"
        align="center"
        label="企业数量"
        width="150"
      >
        <template #default="item">
          {{ item.row.businessNum == null ? 0 : item.row.businessNum }}
        </template>
      </el-table-column>
      <el-table-column prop="sevicerNum" align="center" label="服务者数量">
        <template #default="item">
          {{ item.row.sevicerNum == null ? 0 : item.row.sevicerNum }}
        </template>
      </el-table-column>
      <el-table-column prop="selfBusinessNum" align="center" label="个体户数量">
        <template #default="item">
          {{ item.row.selfBusinessNum == null ? 0 : item.row.selfBusinessNum }}
        </template>
      </el-table-column>
      <el-table-column prop="taskNum" align="center" label="任务数量">
        <template #default="item">
          {{ item.row.taskNum == null ? 0 : item.row.taskNum }}
        </template>
      </el-table-column>
      <el-table-column prop="allFee" label="累计服务款">
        <template #default="item">
          {{ formatNumber(item.row.allFee) }}
        </template>
      </el-table-column>
      <el-table-column prop="allTax" label="纳税额">
        <template #default="item">
          {{ formatNumber(item.row.allTax) }}
        </template>
      </el-table-column>
      <el-table-column prop="billedAmount" label="已开票">
        <template #default="item">
          {{ formatNumber(item.row.billedAmount) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="caozuo"
        label="操作"
        width="70"
        class-name="editor"
      >
        <template #default="item">
          <router-link :to="{ path: '/lhygDel', query: { id: item.row.id } }">
            <el-button type="text">详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="arrPage"
      :page-size="selectPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ['search'],
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      tableData: [],
      platformType: {
        "1": 'API',
        "2": 'OEM'
      },
      checkboxSelect: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [] // 选中的数据
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      // 获取列表信息
      this.$http({
        url: "/api/platform/selectPlatformSumByName",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          // "mixedStr": this.search,
          platformId: "", // 灵活用工平台id
          platformName: this.search, // 灵活用工平台名称
          pageNum: this.currentPage,
          pageSize: this.selectPage,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData();
    },
    handleSelectionChange() {},
    downloadWhether(d) {
      this.checkboxSelect = d.length;
			this.dwonloadList = d;
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    excelDownload() {
      // 下载
      let checkSelect = new FormData();
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("list", this.dwonloadList[i].id);
      }
      axios({
        method: "POST",
        url: "/api/platform/platformExcel",
        data: checkSelect,
        responseType: "blob",
        headers: {
          Authorization: localStorage.getItem("hegui_token")
        }
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          downloadElement.download = "灵活用工平台信息"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>
